<template>
  <div id="text" ref="textContainer" @dblclick.stop="editText">
    <!--<img v-if="isConvertImg" :src="HtmlValue"/>-->
    <pre v-show="!isEdit" :style="containerStyle" v-html="HtmlValue"></pre>
    <textarea ref="text" v-show="isEdit" :style="containerStyle" :value="TextValue" @change="finishEditText"
              @blur="SetElementEidtState({id: ID, isEdit: false})"></textarea>
  </div>
</template>
<script>
  import { mapActions } from 'vuex'
  import action from '../../common/typeActions'

  // let canvas = null
  export default {
    name: 'Text',
    props: {
      ID: { type: String },
      HtmlValue: { type: String },
      TextValue: { type: String },
      containerStyle: { type: Object },
      isEdit: { type: Boolean, default: false },
      isReadonly: { type: Boolean, default: false },
      isConvertImg: { type: Boolean, default: false }
    },
    data: function () {
      return {}
    },
    // watch: {
    //   HtmlValue: function (n, o) {
    //     if (this.isConvertImg) return
    //     if (n != o) {
    //       let container = this.$refs.textContainer;
    //       if (canvas && container) {
    //         canvas.width = container.offsetWidth;
    //         canvas.height = container.offsetHeight;
    //         this.canvasTextAutoLine(this.HtmlValue, canvas);
    //       }
    //     }
    //   }
    // },
    // mounted: function () {
    //   let container = this.$refs.textContainer;
    //   if (container) {
    //     canvas = document.createElement('canvas');
    //     canvas.width = container.offsetWidth;
    //     canvas.height = container.offsetHeight;
    //   }
    // },
    methods: {
      ...mapActions({
        SetElementEidtState: action.SLIDEEDITOR.SetElementEidtState,
        SetTextElementImage: action.SLIDEEDITOR.SetTextElementImage
      }),
      editText: function () {
        if (this.isReadonly) return
        this.SetElementEidtState({ id: this.ID, isEdit: true })
        this.$nextTick(function () {
          this.$refs.text.focus()
        })
      },
      finishEditText: function () {
        this.$emit('TextChangeFinish', {
          ID: this.ID,
          text: event.target.value
        })
      },
      canvasTextAutoLine: function (str, canvas) {
        let initX = 0
        let initY = 0
        let ctx = canvas.getContext('2d')
        ctx.fillStyle = this.containerStyle['color']
        ctx.textBaseline = 'top'
        ctx.textAlign = this.containerStyle['text-align']
        ctx.font = `${this.containerStyle['font-style']} ${this.containerStyle['font-weight']} ${this.containerStyle['font-size']} ${this.containerStyle['font-family']}`
        ctx.clearRect(0, 0, canvas.width, canvas.height)

        var lineWidth = 0
        var canvasWidth = canvas.width
        var lastSubStrIndex = 0
        for (let i = 0; i < str.length; i++) {
          // 字符是否为换行符
          let isNewLine = /\n/.test(str[i])

          lineWidth += isNewLine ? 0 : ctx.measureText(str[i]).width

          if (i === str.length - 1) {
            if (ctx.textAlign === 'center') {
              initX = Math.abs(canvasWidth - lineWidth) / 2 + lineWidth / 2
            } else if (ctx.textAlign === 'right') {
              initX = canvasWidth
            }
            ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY)
          } else if (lineWidth > canvasWidth - initX || isNewLine) {
            if (ctx.textAlign === 'center') {
              initX = Math.abs(canvasWidth - lineWidth) / 2 + lineWidth / 2
            } else if (ctx.textAlign === 'right') {
              initX = canvasWidth
            }
            ctx.fillText(str.substring(lastSubStrIndex, i), initX, initY)
            initY += parseInt(this.containerStyle['font-size']) * 1.4
            lineWidth = initX = 0
            lastSubStrIndex = isNewLine ? i + 1 : i
          }
        }
        this.SetTextElementImage({ id: this.ID, img: canvas.toDataURL('image/png') })
      }
    }
  }
</script>
<style>
  #text {
    width: 100%;
    height: 100%;
  }

  #text textarea {
    resize: none;
    border: none;
    width: 100%;
    height: 100%;
    background: transparent;
  }

  #text img {
    resize: none;
    border: none;
    width: 100%;
    height: 100%;
    background: transparent;
  }

  #text textarea:focus {
    outline: none;
  }

  #text pre {
    margin: 0 auto;
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
  }
</style>
